<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <img src="./images/huojian.gif" alt="">
    <script>
        // 案例分析
        // 1.鼠标不断的移动，使用鼠标移动事件：mousemove
        // 2.在页面中移动，给document注册事件
        // 3.图片要移动距离，且不占位置，我们使用绝对定位即可
        // 4.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，
        // 把这个x和y坐标做为图片的top和left的值就可以移动图片了
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // console.log(66);
            // 1.mousemove 只要鼠标移动1px 就会触发这个事件
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标:' + x, 'y坐标:' + y);

            // * 千万别忘了添加 px 单位 
            // 让鼠标指在图片中心 left和top 减 图片大小的一半
            pic.style.left = x - 25 + 'px';
            pic.style.top = y - 25 + 'px';


        })
    </script>
</body>

</html>